<template>
    <div class="tabcontrol">
            <div class="tab-item" v-for="(item,index) in titles" @click="changecurent(index)" :key="index">
                <span :class="{active:index==curent}">{{item}}</span>
            </div>
    </div>
</template>

<script>
export default {
    props:['titles'],
    data() {
        return {
            curent:0
        }
    },
    methods: {
        changecurent(i){
            this.curent = i
            this.$emit("tabchange",i)
        }
    },
}
</script>

<style scoped>
.tabcontrol{
    background-color: #eee;
    width: 100%;
    height: 36px;
    display:flex;
    justify-content: flex-start;
    text-align: center;
    align-items: center;
    
}
.tab-item{
    flex:1
}
.tab-item span{
    padding: 4px;
}
.active{
    color: deeppink;
    border-bottom: 2px solid deeppink;
}
</style>